<template >
  <div id="d1">
    <div id="d2">
      <div>
        <h2>酒店管理系统</h2>
      </div>
      <el-form
        ref="loginform"
        label-width="80px"
        style="width: 40%; margin: 0px auto"
        :model="loginform"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="staff_telephone">
          <el-input
            v-model="loginform.staff_telephone"
            type="staff_telephone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="staff_password">
          <el-input
            v-model="loginform.staff_password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginform')"
            >登录</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style scoped>
@import url("../assets/test.css");
#d1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0px solid blue;
  background-size: 100% 100%;
  background-image: url(../assets/2.jpg);
}
#d2 {
  width: 50%;
  border: 0px solid red;
  margin-top: 100px;
  margin-left: 700px;
  font-weight: bolder;
}
</style>
<script>
import { md5 } from "../MD5";
export default {
  data() {
    return {
      loginform: {
        staff_telephone: "111",
        staff_password: "123456",
      },
      rules: {
        staff_telephone: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          //{ type: 'number', message: '必须为数字'}
        ],
        staff_password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { type: 'number', message: '必须为数字'}
        ],
      },
    };
  },
  methods: {
    submitForm(loginform) {
      this.$refs[loginform].validate((valid) => {
        if (valid) {
          this.go();
        } else {
          return false;
        }
      });
    },
    go() {
      this.$axios
        .post("/login.do", {
          staff_telephone: this.loginform.staff_telephone,
          staff_password: md5(this.loginform.staff_password),
        })
        .then((res) => {
          if (res.data.message == "登录成功") {
            sessionStorage.setItem("user", this.loginform.staff_telephone);
            sessionStorage.setItem("permission_list", res.data.data);
            this.$router.push("/Index");
          } else {
            alert(res.data.message);
          }
        })
        .catch((error) => {});
    },
  },

  components: {},
  mounted() {},
};
</script>